import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import {
  getSongsListInfo,
  getSongsListInfoLike
} from '@/service/find-music/ranking-list'
import { getSongSheets, getSongSheetsLike } from '@/service/song-sheet'
import { getDownMusic } from '@/service/my-music'
import SongComment from '@/base-ui/comment'
import SongCollect from '../cpns/song-collect.vue'
import { Message } from '@/utils/message'

export function InitDoing() {
  const commentRef = ref<InstanceType<typeof SongComment>>()
  const collectRef = ref<InstanceType<typeof SongCollect>>()
  const route = useRoute()
  const store = useStore()
  const songRef = ref<HTMLElement>()
  const id = ref()
  id.value = route.params.id
  // 判断是不是用户喜欢的歌单 是的话需要用post请求带上cookie
  const likeFlag = ref(false)
  likeFlag.value = id.value.split('-')[1] === 'like' ? true : false
  if (likeFlag.value) {
    id.value = id.value.split('-')[0]
  }
  id.value = Number(id.value)
  // 获取歌单简介信息
  const playlist = ref()
  getSongsBrief(id.value)
  function getSongsBrief(id: number) {
    if (likeFlag.value) {
      getSongsListInfoLike(id).then((res: any) => {
        playlist.value = res.playlist
      })
      return
    }
    getSongsListInfo(id).then((res: any) => {
      playlist.value = res.playlist
    })
  }
  // 菜单选择
  const activeName = ref('frist')
  const handleClick = (tab: any) => {
    switch (tab.props.name) {
      case 'second':
        commentRef.value?.getComment(id.value, 0, 30)
        break
      case 'third':
        collectRef.value?.getCollesct(id.value)
        break
      default:
        getSongs(id.value)
    }
  }
  const input = ref('')

  // 歌曲表格展示
  const songsList: any = ref([])
  const lookShow = ref(false)
  const handleShowAll = () => {
    lookShow.value = false
  }
  getSongs(id.value)
  function getSongs(id: number) {
    if (likeFlag.value) {
      getSongSheetsLike(id).then((res: any) => {
        musicIdList.value = [...res.privileges]
        const arr = [...res.songs]
        arr.map((item) => {
          item.flag = true
        })
        songsList.value = arr
      })
      return
    }
    getSongSheets(id).then((res: any) => {
      musicIdList.value = [...res.privileges]
      const arr = [...res.songs]
      arr.map((item) => {
        item.flag = false
      })
      songsList.value = arr
    })
  }
  // 接收到点击了该歌单里的音乐开始播放
  const musicIdList: any = ref([])
  const hanelDbPlay = () => {
    store.commit('music/updateMusicList', musicIdList.value)
  }
  // 收藏
  const addCollect = (obj: any) => {
    obj.flag = !obj.flag
    store.dispatch('down/pullLike', { id: obj.id, like: obj.flag })
  }
  // 下载
  const startDown = (item: any) => {
    store.dispatch('down/downMusic', item)
  }
  // 评论数量
  const comentCount = computed(() => {
    if (playlist.value) {
      return '评论(' + playlist.value.commentCount + ')'
    }
    return '评论(0)'
  })
  // 返回顶部
  function handleTop() {
    songRef.value!.scrollTop = 0
  }
  // 监听路由id变换重新获取数据
  // watch(route, (to, from) => {
  //   console.log(to.params.id)
  //   if (to.params.id) {
  //     id.value = Number(to.params.id)
  //     getSongsBrief(id.value)
  //     getSongs(id.value)
  //   }
  // })

  return {
    playlist,
    activeName,
    input,
    handleClick,
    songsList,
    lookShow,
    comentCount,
    handleShowAll,
    addCollect,
    id,
    songRef,
    handleTop,
    commentRef,
    collectRef,
    hanelDbPlay,
    startDown,
    likeFlag
  }
}
